<script lang="ts" setup>
import type { InventoryTransaction } from '../../inventory/types';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { $t } from '#/locales';
import { format_datetime } from '#/utils/date';

const emit = defineEmits(['success']);

const formData = ref<InventoryTransaction | null>();

const [Modal, modalApi] = useVbenModal({
  title: $t('inventory.transaction.detail_title'),
  closeOnClickModal: false,
  fullscreenButton: true,
  onOpenChange: (isOpen) => {
    if (isOpen) {
      const data = modalApi.getData<InventoryTransaction>();
      if (data) {
        formData.value = data;
      }
    }
  },
});

/**
 * 获取事务类型名称
 */
function getTypeName(type?: string): string {
  const typeMap: Record<string, string> = {
    stock_in: '入库',
    stock_out: '出库',
    stock_adjust: '调整',
    stock_move: '移动',
    stock_check: '盘点',
  };
  return typeMap[type || ''] || '-';
}

/**
 * 获取事务类型颜色
 */
function getTypeColor(type?: string): string {
  const colorMap: Record<string, string> = {
    stock_in: '#52c41a',
    stock_out: '#ff4d4f',
    stock_adjust: '#faad14',
    stock_move: '#1890ff',
    stock_check: '#722ed1',
  };
  return colorMap[type || ''] || '#333';
}

/**
 * 获取差异颜色
 */
function getDiffColor(diff?: number | string): string {
  const num = typeof diff === 'string' ? parseFloat(diff) : diff || 0;
  return num === 0 ? '#333' : num > 0 ? '#52c41a' : '#ff4d4f';
}

/**
 * 格式化数字
 */
function formatNumber(num?: number | string): string {
  if (num === undefined || num === null || num === '') return '0.00';
  const n = typeof num === 'string' ? parseFloat(num) : num;
  return n.toFixed(2);
}
</script>

<template>
  <Modal>
    <div v-if="formData" class="transaction-detail">
      <div class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <div class="detail-row">
          <span class="detail-label">事务编号:</span>
          <span class="detail-value">{{
            formData.transaction_code || formData.transaction_id
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">事务类型:</span>
          <span
            class="detail-value"
            :style="{ color: getTypeColor(formData.transaction_type) }"
          >
            {{ getTypeName(formData.transaction_type) }}
          </span>
        </div>

        <div class="detail-row">
          <span class="detail-label">创建时间</span>
          <span class="detail-value">{{
            formData.create_time ? format_datetime(formData.create_time) : '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">备注:</span>
          <span class="detail-value">{{ formData.remark || '-' }}</span>
        </div>
      </div>

      <div class="detail-section">
        <h3 class="section-title">产品信息</h3>
        <div class="detail-row">
          <span class="detail-label">产品编码:</span>
          <span class="detail-value">{{
            formData.product?.product_code || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">产品名称:</span>
          <span class="detail-value">{{
            formData.product?.product_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">规格型号:</span>
          <span class="detail-value">{{
            formData.product?.specification || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">单位:</span>
          <span class="detail-value">{{ formData.product?.unit || '-' }}</span>
        </div>
      </div>

      <div class="detail-section">
        <h3 class="section-title">库存信息</h3>
        <div class="detail-row">
          <span class="detail-label">数量:</span>
          <span
            class="detail-value"
            :style="{
              color:
                formData.transaction_type === 'stock_in'
                  ? '#52c41a'
                  : '#ff4d4f',
            }"
          >
            {{
              typeof formData.quantity === 'number' &&
              formData.transaction_type === 'stock_in'
                ? `+${String(formData.quantity)}`
                : String(formData.quantity)
            }}
          </span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作仓库:</span>
          <span class="detail-value">{{
            formData.warehouse?.warehouse_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">操作库位:</span>
          <span class="detail-value">{{
            formData.location?.location_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">单价:</span>
          <span class="detail-value"
            >¥{{ formatNumber(formData.unit_cost) }}</span
          >
        </div>
        <div class="detail-row">
          <span class="detail-label">金额:</span>
          <span class="detail-value"
            >¥{{
              formatNumber(formData.quantity * (formData.unit_cost || 0))
            }}</span
          >
        </div>
      </div>

      <!-- 调整/移动信息 -->
      <div
        v-if="formData.transaction_type === 'stock_move'"
        class="detail-section"
      >
        <h3 class="section-title">移动信息</h3>
        <div class="detail-row">
          <span class="detail-label">原仓库:</span>
          <span class="detail-value">{{
            formData.from_warehouse?.warehouse_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">原库位:</span>
          <span class="detail-value">{{
            formData.from_location?.location_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">目标仓库:</span>
          <span class="detail-value">{{
            formData.to_warehouse?.warehouse_name || '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">目标库位:</span>
          <span class="detail-value">{{
            formData.to_location?.location_name || '-'
          }}</span>
        </div>
      </div>

      <!-- 盘点信息 -->
      <div
        v-if="formData.transaction_type === 'stock_check'"
        class="detail-section"
      >
        <h3 class="section-title">盘点信息</h3>
        <div class="detail-row">
          <span class="detail-label">盘点数量:</span>
          <span class="detail-value">{{
            formData.quantity !== undefined ? String(formData.quantity) : '-'
          }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">差异数量:</span>
          <span
            class="detail-value"
            :style="{ color: getDiffColor(formData.quantity) }"
          >
            {{
              formData.quantity !== undefined ? String(formData.quantity) : '-'
            }}
          </span>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
.transaction-detail {
  padding: 20px;
}

.detail-section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  flex-shrink: 0;
  width: 100px;
  color: #666;
}

.detail-value {
  flex: 1;
  color: #333;
  word-break: break-word;
}
</style>
